<template>
  <div class="links">
    <ul class="link_list" v-if="linkList.length">
      <li class="link_item" v-for="(item, index) in linkList"  :key="index">
          
        <a class="c_link" :href="item.url">
          <div class="c_div_img" >
            <img class="c_img" :src="item.src">
          </div>
           <div class="c_div_content">
              <p>{{item.title}}</p>
              <span>网络信息汇聚</span>
           </div>
          
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

  data () {
    return {
      linkList: [
        {
          url: 'http://www.wuhan.gov.cn/',
          src: require("../../assets/images/convergence/004.png"),
          title: '【武汉市人民政府】武汉市人民政府官网'
        }, {
          url: 'http://www.hubei.gov.cn/',
          src: require("../../assets/images/convergence/004.png"),
          title: '【湖北省人民政府】湖北省人民政府官网'
        }, {
          url: 'http://www.nhc.gov.cn/xcs/yqfkdt/202001/9e73060017d744aeafff8834fc0389f4.shtml',
          src: require("../../assets/images/convergence/004.png"),
          title: '【国家卫健委】新型冠状病毒传播途径与预防指南'
        }, {
          url: 'https://vp.fact.qq.com/home?from=timeline&isappinstalled=0',
          src: require("../../assets/images/convergence/003.png"),
          title: '【腾讯新闻较真平台】新型冠状病毒肺炎最新辟谣科普实时更新中'
        }, {
          url: 'https://news.qq.com//zt2020/page/feiyan.htm',
          src: require("../../assets/images/convergence/003.png"),
          title: '【腾讯新闻疫情动态】新型病毒肺炎疫情最新动态实时更新中'
        }, {
          url: 'https://onwh.51rry.com/#/',
          src: require("../../assets/images/convergence/004.png"),
          title: '【湖北医疗物资需求信息平台】'
        }, {
          url: 'https://voice.baidu.com/act/newpneumonia/newpneumonia',
          src: require("../../assets/images/convergence/004.png"),
          title: '【百度实时大数据报告】'
        }
        
      ]
    }
  }

}
</script>

<style  lang="less" scoped>
ul {
  width: 100%;
  margin-top: 1%;
  li {
    width: 100%;
    padding: 0% 5%;
    height: 90px;
    border: 1px solid #dddddd;
  }
  li:nth-child(even) {
    // background: url("../../assets/images/home/item_even_bg.png");
  } //li的偶数行样式

  li:nth-child(odd) {
    // background: url("../../assets/images/home/item_odd_bg.png");
  } //li的奇数行样式
}



.c_link {
  height: 90px;
  vertical-align: middle;
  display: table-cell;
  width: 100%;
  text-align: left;
  .c_div_img{
    width: 18vw;
    height: 18vw;
    float: left;
    .c_img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
  .c_div_content{
      width: 70vw;
      height: 20vw;
      float: left;
      vertical-align: middle;
      display: flex;
      justify-content: center;
      flex-direction: column;
    p{
      padding-left: 10px;
      // color: #d1f4fe;
      color: #333333;
    }
    span{
        display: inline-block;
        float: left;
        font-size: 12px;
        line-height: 30px;
        padding-left: 10px;
        height: 30px;
        // color: rgba(209, 244, 254, 0.7);
        color: #333333;
    }
  }
}

a {
  color: white;
}
</style>